<template>
	<view class="wh p10">
		<view class="coupon">
			<view class="f-1 p10" style="overflow-y: auto;">
				<view class="mb15">
					<u-checkbox-group v-model="isAll" :activeColor="subColor" icon-color="#000" @change="Allchange">
						<u-checkbox label="全选" :name="1"></u-checkbox>
					</u-checkbox-group>
				</view>
				<u-checkbox-group v-model="checkList" :activeColor="subColor" icon-color="#000" placement="column"
					@change="checkboxChange">
					<view class="itemC mb10 bs10" v-for="(item,index) in list" :key="index">
						<view class="dfbc bf p10">
							<u-checkbox label=" " :name="item.id" @change="itemChange(item,$event)"></u-checkbox>
							<view>
								<u-number-box v-model="item.num" :name="index" integer
									@change="numChange(item,$event)"></u-number-box>
							</view>
						</view>
						<view class="ihead bf dfbc p10" style="">
							<view>
								<view class="dfa mb5">
									<text class="wei6 pr5 f16">{{item.name}}</text>
									<u-tag v-if="item.type==1" text="代金券" type="primary" size="mini" plain></u-tag>
									<u-tag v-if="item.type==2" text="折扣券" type="success" size="mini" plain></u-tag>
									<u-tag v-if="item.type==3" text="兑换券" type="error" size="mini" plain></u-tag>
									<u-tag v-if="item.type==4" text="运费券" type="warning" size="mini" plain></u-tag>
								</view>
								<view class="c6 f12 mb5" v-if="item.period&&item.period.type==1">
									有效期：{{dateFormat(item.period.timeArr.startTime)}}~{{dateFormat(item.period.timeArr.endTime)}}
								</view>
								<view class="c6 f12 mb5" v-if="item.period&&item.period.type==2">
									获得券{{item.period.day.type==1?'当日':'次日'}}开始
									{{item.period.day.value}}个自然日内有效
								</view>
								<view class="c6 f12 mb5" v-if="item.period&&item.period.type==3">
									获得券{{item.period.hours.type==1?'当日':'次日'}}开始{{item.period.hours.value}}个自然日内有效
								</view>
							</view>
							<view class="cf5 f24 tac">
								<view class="wei6" v-if="item.type==1||(item.type==4&&item.rule.disContent==3)">
									<text class="f16">￥</text>{{item.rule.money}}
								</view>
								<view class="wei6" v-if="item.type==2">
									{{item.rule.discount}}<text class="f16">折</text>
								</view>
								<view class="cf5 pt5 f14" v-if="item.type!==3&&item.startSwitch==1">
									每满{{item.startMoney}}元可用</view>
								<view class="cf5 pt5 f12" v-if="item.type!==3&&item.startSwitch==0">
									无门槛</view>
								<view class="cf5 pt5 f14" v-if="item.type==3">
									{{item.rule.disType==1?'优惠最高价格商品':'优惠最低价格商品'}}
								</view>
							</view>
						</view>
						<view class="lr"></view>
						<view class="rr"></view>
						<view class="icenter bf"></view>
						<view class="bf p10">
							<view class="c9 f12" style="display: inline-flex;align-items:center;" @click="toEdit(item)">
								<text>使用规则</text><u-icon name="arrow-right" color="#666" size="13"></u-icon>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</view>
		<view class="bottomBox bf8">
			<u-button size="large" :customStyle="{color:'#000',width:'90%',fontWeight:'bold'}"
				color="linear-gradient(to right, #fee14f, #fdc450)" shape="circle" text="发券" type="info"
				@click="draw"></u-button>
		</view>
		<editCoupon ref="editCouponRef"></editCoupon>
		<u-modal :show="show" :showCancelButton="true" :confirmColor="subColor" confirmText="确认" cancelText="取消"
			content='你确定发放此券吗？' @confirm="save"></u-modal>
	</view>
</template>

<script>
	import editCoupon from './components/editCoupon.vue';
	export default {
		components: {
			editCoupon
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				show: false,
				queryForm: {
					pageNo: 1,
					pageSize: 9999,
					channel: 2,
					subState: 'start'
				},
				list: [],
				isAll: [],
				checkList: [],
				form: {
					type: 4,
					jobType: 4,
					data: [],
					changeType: 1,
					value: []
				}
			}
		},
		onLoad(options) {
			if (options && options.id) {
				this.form.data[0] = Number(options.id)
			}
			this.fetchData()
		},
		methods: {
			async fetchData() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.getCouponEdit,
					data: this.queryForm
				})
				this.list = list ? list : [];
				this.list.forEach(v => v.num = 1)
			},
			checkboxChange(e) {},
			itemChange(v, e) {
				if (e) {
					this.form.value.push({
						id: v.id,
						num: v.num
					})
				} else {
					this.form.value = this.form.value.filter(item => item.id != v.id)
				}
			},
			numChange(v, e) {
				this.form.value.forEach(item => {
					if (item.id == v.id) item.num = e.value
				})
			},
			Allchange() {
				if (!this.isAll[0] == 1) {
					this.form.value = this.list.map(v => {
						return v = {
							id: v.id,
							num: v.num
						}
					})
					this.checkList = this.list.map(v => v.id)
				} else {
					this.form.value = []
					this.checkList = []
				}
			},
			//详情
			toEdit(item) {
				this.$refs['editCouponRef'].open({
					id: item.id,
					type: item.type
				})
			},
			//领取
			async draw() {
				if (this.checkList.length > 0) {
					this.show = true
				} else {
					uni.$u.toast('请先选择优惠券');
				}
			},
			async save() {
				this.show = false
				const {
					msg
				} = await this.beg.request({
					url: this.api.addCoupon,
					method: 'POST',
					data: this.form
				})
				uni.$u.toast('发券成功');
				setTimeout(() => {
					this.fetchData()
					uni.$emit('updateData', this.form.data[0])
					uni.navigateBack({
						delta: 1
					})
				}, 800)
			},
			dateFormat(time) {
				var date = new Date(time);
				var year = date.getFullYear();
				var month =
					date.getMonth() + 1 < 10 ?
					"0" + (date.getMonth() + 1) :
					date.getMonth() + 1;
				var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var minutes =
					date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var seconds =
					date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				return (
					year + "." + month + "." + day
				);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon {
		padding-bottom: 20rpx;
		width: 100%;
		height: 100%;
		max-height: calc(100vh - 99px);
		overflow-y: auto;
		display: flex;
		flex-direction: column;

		.itemC {
			position: relative;

			.icenter {
				margin: 0 auto;
				width: 90%;
				height: 5rpx;
				text-decoration: line-through;
				border-bottom: 3rpx dashed #ddd;
			}

			.lr,
			.rr {
				position: absolute;
				bottom: 65rpx;
				width: 30rpx;
				height: 30rpx;
				background: #f7f7f7;
				border-radius: 50%;
			}

			.lr {
				left: -18rpx;
			}

			.rr {
				right: -18rpx;
			}
		}
	}

	.bottomBox {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 35rpx 35rpx 45rpx;
		width: 100vw;
		box-shadow: 0 0 20rpx 10rpx #ddd;
	}
</style>